<template>
	<view >
		<!-- 导航栏 -->
		<navBar bgColor="#FFF">
			<image :slot="'left'"
				@click="navToBack"
				:src="xcxImgUrl && xcxImgUrl+'fanhui.svg'"
				style="width: 36rpx;height: 36rpx;"></image>
			<text :slot="'content'">我的收藏</text>
		</navBar>
		<!-- 搜索栏 -->
		<view style="background-color: #FFF;">
			<search 
				@searchBlur='searchBlur'
				@nativeInput="nativeInput"
				:isLinks="false"
				bgColor="#F5F5F5">
			</search>
		</view>
		
		
		<scroll-view 
		scroll-y
		:style="{'height': 'calc(100vh - ' + demoTopHieght +')'}"
		@scrolltolower="scrolltolower"
		class="main_myCollect ">
		<view class="" v-if="collectList.length>0">
			<view
			v-for="(item,index) in collectList"
			:key="index"
			class="main_myCollect_item pd10" @click="item.isDown && item.isDown == 1 ? '' : toDetail(item)">
				<view class="main_myCollect_item_l">
					<!-- <checkbox
					@click="danjiCheckBox(index)"
					:checked="item.checked"
					color="#ec4141"
					style="transform:scale(0.7);border-radius: 50%;"
					></checkbox> -->
					<view class="custom_checkbox" :class="{active : item.checked[0]}">
						<u-checkbox-group v-model="item.checked" @change="danjiCheckBox($event,index)">
						<u-checkbox
							:name="true"></u-checkbox>
						</u-checkbox-group>
					</view>
				</view>
				<view class="main_myCollect_item_c" v-if="updateNoneImg">
					<image :src="item.spuInfo && item.spuInfo.picture ? uploadImgUrl + item.spuInfo.picture : updateMorentu"></image>
				</view>
				<view class="main_myCollect_item_r ml5">
					<view class="main_myCollect_item_r_t texttowShow">
						{{item.spuInfo && item.spuInfo.name ? item.spuInfo.name : ''}}
					</view>
					<view class="main_myCollect_item_r_b" style="display: flex;align-items: center;">
						<template v-if="!(item.isDown && item.isDown == 1)">
						￥{{item.defaultSKU &&
							item.defaultSKU.priceTrackingInfo &&
							item.defaultSKU.priceTrackingInfo.price ?
							Utils.formatToFixed(item.defaultSKU.priceTrackingInfo.price,'price') :
							item.defaultSKU && 
						item.defaultSKU.skuPriceInfo && 
						item.defaultSKU.skuPriceInfo.length && 
						item.defaultSKU.skuPriceInfo[0].price ?
						Utils.formatToFixed(item.defaultSKU.skuPriceInfo[0].price,'price') : 0
					}} <text>/{{
						item.defaultSKU &&
						item.defaultSKU.unitInfo && 
						item.defaultSKU.unitInfo.name ?
						item.defaultSKU.unitInfo.name : ''
					}}</text></template>
					<view v-if="item.isDown && item.isDown == 1" style="font-size: 30rpx;margin-left:auto;color:#ccc;">已下架</view>
					</view>
				</view>
			</view>
		</view>
			<view  v-else style="display: flex;align-items: center;justify-content: center;flex-direction: column;
			height: 357px">
						<image src="/static/newpic/nocollect.svg" mode=""></image>
						<view>没有收藏的商品哦，快去收藏吧！</view>
					</view>
			
		</scroll-view>
		
		<view class="main_myCollect_caozuo ">
			<view class="main_myCollect_caozuo_l pd_left10">
				<!-- <checkbox
				@click="danjiAllCheckedBox"
				color="#ec4141"
				:checked="allChecked"
				style="transform:scale(0.7);border-radius: 50%;"></checkbox> -->
				<view class="custom_checkbox" :class="{active : allChecked[0]}">
					<u-checkbox-group v-model="allChecked" @change="danjiAllCheckedBox">
					<u-checkbox
						:name="true"></u-checkbox>全选
					</u-checkbox-group>
				</view>
				
			</view>
			<view 
			@click="del"
			class="main_myCollect_caozuo_r ">
				删除
			</view>
		</view>
		
		<!-- 模态框确认 -->
		<u-modal 
		:show="modalShow" 
		:title="modalInfo.title" 
		showConfirmButton
		showCancelButton
		@confirm='modalConfirm'
		@cancel='modalShow = false'
		:content='modalInfo.content'>
		
		</u-modal>
		
	</view>
</template>

<script>
	import {mapGetters} from 'vuex'
	import {listMallCommodityInfoCollectPageInfo,addOrCancelMallCommodityInfoCollect, login} from '@/api/global.js'
	import {uploadImgUrl} from '@/utils/request.js'
	export default {
		computed:{
			...mapGetters(['demoTopHieght']),
			//返回有图无图控制
			updateNoneImg() {
				return this.$store.state.configSetting.noneImge == 1 ? false : true
			},
			//返回默认图 兼容小程序 直接在html写vuex不生效
			updateMorentu() {
				return this.$store.state.morentu
			},
		},
		data() {
			return {
				timer:null,
				collectList:[],//收藏列表
				pageData:{
					currentPage:1,
					pageSize:10
				},
				lastPage:0,
				searchParams:{
					search:'',
					sort:1,
				},
				uploadImgUrl,//图片前缀
				allChecked:false,//全选状态
				ArrId:[],//删除收藏集合
				modalShow:false,//模态框
				modalInfo:{ //模态框提示对象内容
					title:'温馨提醒',
					content:''
				}
				
			};
		},
		onShow() {
			this.$nextTick(() => {
				//获取高度
				this.Utils.getDemoTopHeight('main_myCollect')
			})
		},
		onLoad() {
			this.getList()//获取列表
		},
		methods:{
			toDetail(item){
				uni.navigateTo({
					url: `/page_public/commodityDetail?commodityId=${item.commodityId}`
				})
			},
			//删除
			del(){
				this.ArrId = this.collectList.filter(it => it.checked.length > 0).map(item=>item.commodityId)
				if(this.ArrId.length == 0) {
					this.Utils.toast(`请先选择商品`) 
					return
				}
				this.modalInfo.content = '是否从收藏列表取消选中的收藏项?'
				this.modalShow = true
			},
			//模态框提示确认
			async modalConfirm(){
				let resr = await addOrCancelMallCommodityInfoCollect({
					type:2,//类型[1.添加  2.取消]
					commodityIds:this.ArrId
				})
				if(resr.code == 2000){
					this.Utils.toast('删除成功')
					this.modalShow = false
					this.collectList = []
					this.pageData.currentPage = 1
					this.getList()
				   this.allChecked = [false]
				}else{
					this.Utils.toast(`${resr.msg}`)
				}
			},
			//点击全选
			danjiAllCheckedBox(e){
				this.allChecked = e;
				this.collectList.forEach(item => item.checked = this.allChecked)
			},
			//点击选择
			danjiCheckBox(e,index){
				//修改当前选择状态
				this.collectList[index].checked = e;
				//如果都选择 全选也选上
				if(this.collectList.every(item=>item.checked[0]==true)){
					this.allChecked = [true]
				}else{
					this.allChecked = [false]
				}
			},
			//搜索栏失去焦点
			searchBlur(val){
				this.searchParams.search = val
				this.collectList = []
				this.pageData.currentPage = 1
				this.getList()
			},
			nativeInput(e){
				console.log(e);
				this.searchParams.search = e;
				clearTimeout(this.timer);
				this.timer = setTimeout(() => {
					this.pageData.currentPage = 1
					this.getList()
				},1000)
			},
			//返回上一级
			navToBack(){
				uni.switchTab({
					url:'/pages/myde/myde'
				})
			},
			//获取列表
			async getList(){
				uni.showLoading()
				let res = await listMallCommodityInfoCollectPageInfo({
					...this.pageData,
					...this.searchParams
				})
				if(res.code == 2000){
					uni.hideLoading()
					res.data.info.list = res.data.info.list.map(item=>{
						return {
							...item,
							checked:false
						}
					}) 
					if(this.pageData.currentPage == 1){
						this.collectList = res?.data?.info?.list || []
					}else{
						this.collectList = this.collectList.concat(res?.data?.info?.list || [])
					}
					console.log(this.collectList,'this.collectList');
					this.lastPage = res?.data?.info?.lastPage

				}else{
					this.Utils.toast(`${res.msg}`)
				}
			},
			//下拉加载
			scrolltolower(){
				
				if(this.pageData.currentPage > this.lastPage){
					return
				}else{
					this.pageData.currentPage++
					this.getList()
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	
	/deep/.custom_checkbox {
		padding-left: 15rpx !important;
	}
.main_myCollect{
	width: 100%;
	box-sizing: border-box;
	padding-bottom: 100rpx;

	.main_myCollect_item {
	 padding-left: 36rpx;
	}
	.main_myCollect_item{
		border-bottom: 1px solid #f3f3f3;
		display: flex;
		align-items: center;
		
		.main_myCollect_item_l{
			width: 80rpx;
		
		}
		.main_myCollect_item_c{
			width: 180rpx;
			height: 180rpx;
			image{
				width: 100%;
				height: 100%;
			}
		}
		.main_myCollect_item_r{
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			height:180rpx;
			.main_myCollect_item_r_t{
				font-size: $font_size_12;
				color: $text_color_333;
			}
			.main_myCollect_item_r_b{
				font-size: $font_size_18;
				color: $text_color_ec4141;
				font-weight: bold;
				text{
					font-size: $font_size_12;
					color: $text_color_808080;
					font-weight: normal;
				}
			}
		}
	}
	
}
.main_myCollect_caozuo{
	background-color: #FFF;
	box-sizing: border-box;
	width: 100%;
	height: 88rpx;
	position: fixed;
	left: 0;
	bottom: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	.main_myCollect_caozuo_l{
		font-size: $font_size_14;
		color: $text_color_333;
	}
	.main_myCollect_caozuo_r{
		width: 180rpx;
		height: 100%;
		background-color: $text_color_ec4141;
		color: #FFF;
		font-weight: bold;
		font-size: 32rpx;
		text-align: center;
		line-height: 88rpx;
	}
}
</style>
